<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>添加新地址</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="__ROOT__/static/home/js/shop/rem.js"></script>
    <!--<script type="text/javascript" src="__ROOT__/static/plugins/jquery-3.2.1/jquery-3.2.1.min.js"></script>-->
    <script type="text/javascript" src="__ROOT__/static/home/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="__ROOT__/static/plugins/layer.mobile-v2.0/layer_mobile/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/base.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/page.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/all.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/loading.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/static/home/css/shop/goodscats.css"/>
    <script type="text/javascript">
        $(window).load(function(){
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
    </script>
</head>
<!--loading页开始-->
<!--loading页结束-->
<body>
<header class="mui-bar mui-bar-nav report-header box-s" id="header">
    <a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
    <p>添加新地址</p>
</header>
<div id="main" class="mui-clearfix add-address" style="margin-top: 60px;"  >
    <div class="plist clearfloat data">
        <ul>
            <li class="clearfloat">
                <p class="fl">收货人:&nbsp;&nbsp;&nbsp;</p>
                <input type="text" class="" name="" id="user_name" value="{$rows['user_name']}" />
            </li>
            <li class="clearfloat">
                <p class="fl">联系电话:</p>
                <input type="text" class="" name="" id="phone" value="{$rows['phone']}" />
            </li>
            <li class="clearfloat">
                <p class="fl">所在地区:
                    <select name="provinceId" id="provinceId" class="" onchange="provinceId(this)">
                        <option value="0" selected="selected">请选择</option>
                        {volist name="getProvince" key="key" id="area"}
                        <option value="{$area['areaId']}"  {if condition="$area['areaId'] eq $areaid1"}selected="selected"{/if}   >{$area["areaName"]}</option>
                        {/volist}
                    </select>
                    <select name="cityId" id="cityId" class="" onchange="cityId(this)">
                        <option value="0" selected="selected">请选择</option>
                        {volist name="getCityId" key="key" id="area2"}
                        <option value="{$area2['areaId']}"  {if condition="$area2['areaId'] eq $areaid2"}selected="selected"{/if}   >{$area2["areaName"]}</option>
                        {/volist}
                    </select>
                    <select name="countyId" id="countyId" class="" >
                        <option value="0" selected="selected">请选择</option>
                        {volist name="getCountyId" key="key" id="area3"}
                        <option value="{$area3['areaId']}"  {if condition="$area3['areaId'] eq $areaid3"}selected="selected"{/if}   >{$area3["areaName"]}</option>
                        {/volist}
                    </select>
                </p>
            </li>
        </ul>
    </div>
    <textarea name="" rows="4" id="address" placeholder="请填写详细地址，不少于5个字" class="textare box-s">{$rows['address']}</textarea>
    <a href="javascript:;" class="address-add fl"  onclick="doUpdateAddress({$rows['id']})"  >
        保存地址
    </a>

</div>
</body>
<script type="text/javascript">
    //三级联动 ajax获取城市
    function  provinceId(obj){
        var id= $(obj).val();
        if( id ==0  ){
            $('#cityId').html('<option>请选择市</option>');
            $("#countyId").html("<option>请选择区/县</option>");
        }else{
            var params={};
            params.areaId=id;
            $.post("{:url('home/Address/getCityId')}",params,function(data){
//            console.debug(data);
                var obj2= JSON.parse(data);
//            console.debug(obj2);
                var html=[];
                html.push('<option  value="0">请选择市</option>');
                $(obj2).each(function(index,element){
                    html.push('<option value="'+this.areaId+'">'+this.areaName+'</option>');
                });
                html=html.join('');
                $('#cityId').html(html);
                $("#countyId").html("<option>请选择区/县</option>");
            })
        }
    }
    function  cityId(obj){
        var id= $(obj).val();
        if( id ==0  ){
            $("#countyId").html("<option>请选择区/县</option>");
        }else{
            var params={};
            params.areaId=id;
            $.post("{:url('home/Address/getCityId')}",params,function(data){
//                console.debug(data);
                var obj2= JSON.parse(data);
//                console.debug(obj2);
                var html=[];
                html.push('<option  value="0">请选择区/县</option>');
                $(obj2).each(function(index,element){
                    html.push('<option value="'+this.areaId+'">'+this.areaName+'</option>');
                });
                html=html.join('');
                $('#countyId').html(html);
            })
        }
    }
    function doUpdateAddress(id){
        var user_name = $('#user_name').val();
        var phone = $('#phone').val();
        var provinceId = $('#provinceId').val();
        var cityId = $('#cityId').val();
        var countyId = $('#countyId').val();
        var address = $('#address').val();
        if(user_name==''||phone==''||address=='' ){
            layer.open({content: '请填写完整内容',skin: 'msg',time: 3 });
            return;
        }
        if(isNaN(phone)|| phone<1|| phone.length<11|| phone.length>11 ){
            layer.open({content: '电话输入不正确',skin: 'msg',time: 3 });
            return;
        }
        if(cityId==0 ||countyId==0 ||provinceId==0 ){
            layer.open({content: '请选择地区',skin: 'msg',time: 3 });
            return;
        }
//        alert(id);
//        return;
        var params={};
        params.user_name=user_name;
        params.phone=phone;
        params.provinceId=provinceId;
        params.cityId=cityId;
        params.countyId=countyId;
        params.address=address;
        params.id=id;
        $.post("{:url('home/Address/doUpdateAddress')}",params,function(data){
            if( data>0 ){
                layer.open({content: '操作成功',skin: 'msg',time: 3 });
                location.href="{:url('home/Address/addressList')}";
            }else if( data== -1 ){
                layer.open({content: '操作失败',skin: 'msg',time: 3 });
                return;
            }
        })
    }
</script>
</html>
